<app-page>
	<div id="page-wrapper">
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">{{ 'Transactions' | translate }}</h1>
			</div>
			<!-- /.col-lg-12 -->
		</div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						{{ 'Transactions' | translate }}

						<div class="pull-right">
							<button *ngIf="page != 0" type="button" (click)="prevPage()" class="btn btn-outline btn-info btn-xs"><i class="fa fa-angle-left"> {{ 'Previous' | translate }}</i></button>
							<button type="button" (click)="nextPage()" class="btn btn-outline btn-info btn-xs">{{ 'Next' | translate }} <i class="fa fa-angle-right"></i></button>
						</div>

					</div>
					<!-- /.panel-heading -->
					<div class="panel-body">
						<app-loading *ngIf="!transactions"></app-loading>
						<div *ngIf="transactions" class="table-responsive">
							<table class="table table-striped">
								<thead>
								<tr>
									<th>#</th>
									<th>{{ 'BlockId' | translate }}</th>
									<th>{{ 'CreatedAt' | translate }}</th>
									<th>{{ 'Expiration' | translate }}</th>
									<th>{{ 'Actions' | translate }}</th>
								</tr>
								</thead>
								<tbody>
								<tr *ngFor="let transaction of transactions">
									<td><a routerLink="/transactions/{{transaction.trx_id}}">{{transaction.trx_id|slice:0:32}}...</a></td>
									<td><a routerLink="/search" [queryParams]="{q: transaction.transaction_header.ref_block_num}">{{transaction.transaction_header.ref_block_num}}...</a></td>
									<td>{{transaction.createdAt.sec * 1000 | date:'medium'}}</td>
									<td>{{transaction.transaction_header.expiration}}</td>
									<td>{{transaction.actions.length}}</td>
								</tr>
								</tbody>
							</table>
						</div>
						<!-- /.table-responsive -->
					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
		</div>
		<!-- /.row -->
	</div>
	<!-- /#page-wrapper -->
</app-page>
